// 修改密码
<template>
  <div class="module_ userCenter">
    <div class="p16 box">
      <h3 class="mb16 tx-c">修改密码</h3>
      <el-form autocomplete="off"  ref="adminModify" label-position="right" :rules="adminRules" label-width="125px" size="medium " :model="adminModify">
          <el-form-item label="旧密码：" prop='old_password'>
              <el-input type="password" v-model.trim="adminModify.old_password" placeholder="请输入旧密码"></el-input>
          </el-form-item>
          <el-form-item label="新密码：" prop='new_password'>
              <el-input type="password" v-model.trim="adminModify.new_password" placeholder="请输入新密码"></el-input>
          </el-form-item>
          <el-form-item label="重复新密码：" prop='new_password_confirmation'>
              <el-input type="password" size="medium" v-model.trim="adminModify.new_password_confirmation" placeholder="请再次输入新密码"></el-input>
          </el-form-item>
          <el-form-item>
              <div class="flex-justify-bcenter">
                <el-button @click="resetForm('adminModify')">清空</el-button>
                <el-button type="primary" :loading='adminModify_btn' @click="submitForm('adminModify')">确定</el-button>
              </div>
          </el-form-item>
      </el-form>
    </div>
  </div>

</template>

<script>
import {ApipasswordChange} from '@/api'
export default {
  data(){
    var validatePass2 = (rule, value, callback) => {
        if (value === '') {
            callback(new Error('请再次输入密码'));
        } else if (value !== this.adminModify.new_password) {
            callback(new Error('两次输入密码不一致!'));
        } else {
            callback();
        }
    };
    return{
      adminModify_btn: false,
      adminRules:{
        new_password:[ 
            {required: true, message: '请输入新密码', trigger: 'blur'}
        ],
        new_password_confirmation:[ 
            {validator: validatePass2, trigger: 'blur',required: true,}
        ],
        old_password:[
            {required: true, message: '请输入旧密码', trigger: 'blur'}
        ]
      },
       //管理员重置密码
      adminModify:{
        old_password: "",
        new_password: "",
        new_password_confirmation: ''
      }
    }
  },
  methods:{
    submitForm(ele){
        this.$refs[ele].validate((valid) => {
            if (valid) {
                const loadingBtn = ele + '_btn'
                // const modify = ele === 'userModify'
                // const password = modify ? ApipasswordChange : ApipasswordChange
                this[loadingBtn] = true
                ApipasswordChange(this[ele]).then(res => {
                    this[loadingBtn] = false
                    // if(modify){
                    //     Apilogout().then(res => {
                    //         sessionStorage.clear()
                    //         // this.claerInfo()
                    //         this.$message.success('修改成功，请重新登录！')
                    //         this.$router.push('/login')
                    //         setTimeout(()=>{
                    //             location.reload()
                    //         },800)
                            
                    //     })
                    // }else{
                    //     this.$message.success('修改成功！')
                    // }
                    this.$message.success('修改成功！')
                    this.resetForm(ele)
                }).catch(()=>{
                    this.$message.error('修改失败！')
                    this[loadingBtn] = false
                })
            } else {
                return false;
            }
        });
    },
    resetForm(ele){
        this.$refs[ele].resetFields();
    }
  }
}
</script>

<style lang='less' scoped>
.userCenter{
    display: flex;
    align-items: center;
    // justify-content: center;
    padding-top: 8%;
    .box{
        width: 30%;
        height: 35%;
        min-width: 400px;
        min-height: 250px;
    }
}
</style>